<template>
	<view class="list_menu">

		<view class="no_data_img" v-show="list_show">
			<image src="../../../static/icon/no_data.png" mode="left"></image>
			<text>
				暂无代办
				有什么想法？赶紧记下来
			</text>
		</view>


		<view class="">
			<fui-divider width="100%" text="未完成待办" dividerColor="#FFB703" color="#FFB703" v-show="divider_show"></fui-divider>
			<view class="box">
				<view class="collapse">
					<fui-collapse accordion>
						<fui-collapse-item :index="item.ID" v-for="(item) in lists" :key="item.ID">
							<view class="fui-item__box">
								<text>{{item.title}}</text>
							</view>
							<template v-slot:content>
								<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">
									<view class="">
										待办类别：<br />
										<text>{{item.ToDoClassID}}</text>
									</view>
									<view class="">
										待办优先级：<br />
										<text>{{item.PriorityID}}</text>
									</view>
									<view class="">
										待办内容：<br />
										<text>{{item.desc}}</text>
									</view>
									<view><text>开始时间：{{item.start_time}}</text></view>
									<view><text>结束时间：{{item.over_time}}</text></view>
									<view class="func_btn">
										<fui-button type="warning" radius="0" width="160rpx" height="60rpx"
											@click="del(item)">删除</fui-button>
										<fui-button radius="0" width="160rpx" height="60rpx" @click="update(item)">编辑</fui-button>
										<fui-button type="success" radius="0" width="160rpx" height="60rpx"
											@click="FinishToDo(item)">完成</fui-button>
									</view>
								</view>

							</template>
						</fui-collapse-item>
					</fui-collapse>
				</view>
			</view>


		</view>




		<view class="add_btn">
			<button @click="to_add_list">+</button>
		</view>




		<!-- 完成待办 -->
		<view class="overtodo">
			<fui-divider width="100%" text="已完成待办" dividerColor="#008000" color="#008000"></fui-divider>
			<!-- <ul>
				<li v-for="item in over_lists" :key="item.ID"
					style="border-bottom: solid 1px #c2c2c2; padding-bottom: 10rpx; margin-bottom: 10rpx;">
					待办名称：{{item.title}}<br />
					待办内容：<text>{{item.desc}}</text>
					<br />
					完成时间：{{item.UpdatedAt}}
				</li>
			</ul> -->
			<view class="box">
				<view class="collapse">
					<fui-collapse accordion>
						<fui-collapse-item :index="item.ID" v-for="(item) in over_lists" :key="item.ID">
							<view class="fui-item__box">
								<text>{{item.title}}</text>
							</view>
							<template v-slot:content>
								<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">
									<view class="">
										待办类别：<br />
										<text>{{item.ToDoClassID}}</text>
									</view>
									<view class="">
										待办优先级：<br />
										<text>{{item.PriorityID}}</text>
									</view>
									<view class="">
										待办内容：<br />
										<text>{{item.desc}}</text>
									</view>
									完成时间：{{item.UpdatedAt}}
								</view>

							</template>
						</fui-collapse-item>
					</fui-collapse>
				</view>
			</view>

		</view>

		<!-- 用户取消待办 -->
		<view class="deltodo">
			<fui-divider width="100%" text="已取消待办" dividerColor="#f40" color="#F40"></fui-divider>
			<view class="box">
				<view class="collapse">
					<fui-collapse accordion>
						<fui-collapse-item :index="item.ID" v-for="(item) in delr_lists" :key="item.ID">
							<view class="fui-item__box">
								<text>{{item.title}}</text>
							</view>
							<template v-slot:content>
								<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">
									<view class="">
										待办类别：<br />
										<text>{{item.ToDoClassID}}</text>
									</view>
									<view class="">
										待办优先级：<br />
										<text>{{item.PriorityID}}</text>
									</view>
									<view class="">
										待办内容：<br />
										<text>{{item.desc}}</text>
									</view>
									取消时间：{{item.UpdatedAt}}
								</view>

							</template>
						</fui-collapse-item>
					</fui-collapse>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		httpRequest
	} from '../../../utils/request.js'
	export default {
		data() {
			return {
				list_show: true,
				lists: [],
				// checkList: [],
				over_lists: [], // 完成待办列表
				delr_lists: [], // 取消待办列表
				divider_show: false
			}
		},

		methods: {
			/* 添加待办 */
			to_add_list() {
				uni.navigateTo({
					url: "/pages/function/todo/add_to_list"
				})
			},
			// 加载所有未完成待办信息
			gettodo() {
				httpRequest("/api/get_todo", "get").then(res => {
					this.lists = res
					if (this.lists.length !== 0) {
						this.list_show = false
						this.divider_show = true
					}
				}).catch(err => {

					uni.showToast({
						icon: 'error',
						title: err,
						position: 'center',
						duration: 1500
					})
				})
			},
			/* 完成待办信息 */
			FinishToDo(item) {

				let query = {
					"id": item.ID
				}
				httpRequest("/api/finish", "put", query).then((res) => {
					uni.showToast({
						title: res,
						icon: "success"
					})
					this.gettodo()
					this.get_all_voer_todo()
				}).catch(err => {

					uni.showToast({
						icon: 'error',
						title: err,
						position: 'center',
						duration: 1500
					})
				})
			},
			/* 删除待办 */
			del(item) {
				let query = {
					"id": item.ID
				}
				httpRequest("/api/delete", "delete", query).then((res => {
					uni.showToast({
						title: res,
						icon: "success",
						// duration:25
					})
					this.gettodo()
					this.get_all_del_todo()

				})).catch(err => {

					uni.showToast({
						icon: 'error',
						title: err,
						position: 'center',
						duration: 1500
					})
				})
			},
			/* 加载所有已完成的待办 */
			get_all_voer_todo() {

				httpRequest("/api/get_over_todo", "get", "").then((res => {
					this.over_lists = res
				})).catch(err => {

					uni.showToast({
						icon: 'error',
						title: err,
						position: 'center',
						duration: 1500
					})
				})
				this.gettodo()
				this.get_all_del_todo()
			},
			/* 加载所有用户取消的待办 */
			get_all_del_todo() {
				httpRequest("/api/get_del_todo", "get", "").then((res => {
					this.delr_lists = res
				})).catch(err => {

					uni.showToast({
						icon: 'error',
						title: err,
						position: 'center',
						duration: 1500
					})
				})
			},
			/*  编辑待办 */
			update(item) {
				uni.navigateTo({
					url: "/pages/function/todo/add_to_list?id="+item.ID
				})
				
			}
		},
		onShow() {
			this.get_all_voer_todo()
			this.gettodo()
			this.get_all_del_todo()
		},

	}
</script>

<style scoped>
	.list_menu {
		width: 98%;
		margin: 0 auto;
		position: relative;
	}

	.no_data_img {
		width: 400rpx;
		margin: 0 auto;
	}

	.no_data_img>text {
		align-items: center;
	}

	.add_btn {
		position: fixed;
		bottom: 160rpx;
		right: 60rpx;
		z-index: 100;

	}

	.add_btn>button {
		width: 140rpx;
		height: 140rpx;
		line-height: 120rpx;
		border-radius: 50%;
		background-color: rgb(54, 54, 54);
		font-size: 100rpx;
		color: #fff;
		z-index: 100;
	}

	/* 	.overtodo,
	.deltodo {
		width: 98%;
		margin: 0 auto;
		position: absolute;
	} */




	/* 折叠面板 */
	.fui-item__box {
		width: 100%;
		padding: 26rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.fui-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
		display: block;
	}

	.fui-descr {
		width: 100%;
		padding: 32rpx;
		font-size: 28rpx;
		line-height: 52rpx;
		color: #7F7F7F;
		word-break: break-all;
		box-sizing: border-box;
	}

	.func_btn {
		margin-top: 30rpx;
		display: flex;
	}

	.list_menu {
		z-index: 0 !important;
	}
</style>